<template>
  <div class="album-page fss">
    <div class="left f_nosg">
      <div class="head-wrap" v-loading="data.detail === null">
        <Head :detail="data.detail" v-if="data.detail"></Head>
      </div>

      <!-- 歌曲列表 -->
      <div class="song-list-wrap">
        <Title v-if="data.detail">
          <template #title>
            <span class="title">包含歌曲歌曲列表</span>
            <span class="size">{{ data.detail.size }}首歌</span>
          </template>
          <template #right>
            <span class="outline td_u pr cur_p">
              <i class="icon_music pa"></i>生成外链播放器
            </span>
          </template>
        </Title>
        <SongList
          v-if="data.detail"
          :list="data.songs"
          :specialTop="0"
          :getStatus="() => ''"
          :getRankNumber="() => undefined"
          :otherSlot="false"
        >
          <template #title>
            <span>专辑</span>
          </template>
        </SongList>
      </div>

      <!-- 评论 -->
      <div class="comment-wrap">
        <Combination
          id="comment"
          v-if="data.detail"
          :commentContent="data.comment"
          :commentCount="data.detail.info.commentCount"
          :hotComments="data.hotComments"
          :comments="data.comments"
          :endPage="data.endPage"
          :currentPage="data.currentPage"
          :changePage="changePage"
        ></Combination>
      </div>
    </div>

    <div class="right f_nosg">
      <hotAlbums
        :albums="data.hotAlbums.slice(0, 5)"
        v-if="data.hotAlbums"
        :loading="data.hotAlbums.length === 0"
        :goAlbumPage="goAlbumPage"
        :goArtistAlbumPage="goArtistAlbumPage"
      ></hotAlbums>
      <AppDownload></AppDownload>
    </div>
  </div>
</template>
import {
  
} from "../types/types";

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import {
  reqAlbumDetail,
  reqArtistAlbums,
  reqAlbumComments,
} from "../api";
import {
  AlbumDetailType,
  DiscoverListSongType,
  AlbumType,
  RelatedPlaylistType,
  CommentType,
  PaginationClickType,
} from "../types/types";
import { pageScrollTop } from "../utils"
import Head from "../components/Album/head.vue";
import SongList from "../components/SongList.vue";
import Title from "../components/Title.vue";
import AppDownload from "../components/AppDownload.vue";
import Combination from "../components/Combination.vue";
import hotAlbums from "../components/Album/hotAlbums.vue";

//router实例
const router = useRouter()
const id: string | undefined = router.currentRoute.value.query?.id?.toString()

type dataType = {
  detail: AlbumDetailType | null;
  songs: DiscoverListSongType[],
  comment: string,
  comments: CommentType[],
  hotComments: CommentType[],
  hotAlbums: AlbumType[],
  total: number,
  endPage: number,
  currentPage: number,
}
const data = ref<dataType>({
  detail: null,
  songs: [],
  comment: '',
  comments: [],
  hotComments: [],
  hotAlbums: [],
  total: 0,
  endPage: 0,
  currentPage: 1,
})


//获取专辑内容和专辑歌曲列表
const getDetail = async () => {
  if (!id) return
  let res = await reqAlbumDetail(id)
  data.value.detail = res.album
  data.value.songs = res.songs
  console.log(data.value.detail)

}

//评论按钮跳转评论区
const jumpComments = function () {
  let h = document.getElementById("comment")?.offsetTop
  if (h) pageScrollTop(h)
}

//获取专辑评价列表
const getComments = async () => {
  if (!id) return
  data.value.comments = []
  let res = await reqAlbumComments(id, data.value.currentPage) //limit20
  console.log(res)
  data.value.hotComments = res.hotComments
  data.value.comments = res.comments
  data.value.total = res.total
  data.value.endPage = Math.ceil(res.total / 20);
}

//获取歌手专辑
const getAlbums = async () => {
  if (!data.value?.detail?.artist.id) return
  let res = await reqArtistAlbums(data.value.detail.artist.id)
  console.log(res)
  data.value.hotAlbums = res.hotAlbums
}

//跳转专辑
const goAlbumPage = (id: number) => {
  //相同的id不跳转
  if (data.value.detail?.id === id) return
  router.push('/album?id=' + id)
}

//跳转歌手专辑
const goArtistAlbumPage = () => {
  router.push(`/artist/album?id=${data.value.detail?.artist.id}&total=${data.value.total}`)
}

const changePage = (type: PaginationClickType, page?: number): void => {
  const p = data.value.currentPage;
  const end = data.value.endPage;
  const handle = {
    page: () =>
      type === "page" && page ? (data.value.currentPage = page) : null,
    prev: () => (data.value.currentPage = p === 1 || p === 2 ? 1 : p - 1),
    next: () =>
      (data.value.currentPage = p === end || p + 1 === end ? end : p + 1),
  };
  handle[type]();
};

watch(() => data.value.currentPage, getComments);

onMounted(async () => {
  await getDetail()
  getAlbums()
  getComments()
})

</script>

<style lang="scss" scoped>
.album-page {
  width: 982px;
  min-height: calc(100vh - 278px);
  background: #fff;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  // overflow: hidden;
}
.left {
  width: 709px;
  min-height: calc(100vh - 278px);
  height: auto;
  border-right: 1px solid #d3d3d3;
  padding: 47px 30px 40px 39px;

  .head-wrap {
    margin-bottom: 40px;
  }

  .song-list-wrap {
    height: 33px;
    height: auto;
    .title {
      font-size: 20px;
      line-height: 28px;
    }
    .size {
      font-size: 12px;
      line-height: 16px;
      color: #666;
      margin: 9px 0 0 20px;
    }
    .outline {
      line-height: 16px;
      color: #4996d1;
      i {
        margin-left: -16px;
      }
    }
  }
}

.comment-wrap {
  margin-top: 40px;
}
.right {
  width: 270px;
  padding: 20px 40px 40px 30px;
}
</style>